import { motion } from 'framer-motion'
import AnimatedSection from '../components/shared/AnimatedSection'
import Button from '../components/shared/Button'
import Card from '../components/shared/Card'
import { FiArrowRight, FiCheckCircle, FiGlobe, FiActivity, FiShield } from 'react-icons/fi'

function Home() {
  return (
    <div className="pb-12">
      {/* Hero Section */}
      <section className="pt-32 md:pt-40 pb-16 md:pb-24">
        <div className="container-custom">
          <div className="max-w-4xl mx-auto text-center">
            <motion.h1 
              className="text-4xl md:text-5xl lg:text-6xl font-medium text-secondary-900 dark:text-white mb-6"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
            >
              Beautiful design meets <span className="text-primary-500">powerful functionality</span>
            </motion.h1>
            <motion.p 
              className="text-lg md:text-xl text-secondary-600 dark:text-secondary-300 mb-8 md:mb-10"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
            >
              Experience the perfect blend of stunning aesthetics and intuitive user experience. 
              Our product is designed with attention to every detail.
            </motion.p>
            <motion.div 
              className="flex flex-col sm:flex-row justify-center gap-4"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.6 }}
            >
              <Button size="lg">Get Started</Button>
              <Button variant="outline" size="lg">Learn More</Button>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Featured Image */}
      <section className="py-16">
        <div className="container-custom">
          <AnimatedSection delay={0.2}>
            <div className="relative rounded-apple overflow-hidden shadow-apple dark:shadow-apple-dark">
              <img 
                src="https://images.pexels.com/photos/3756345/pexels-photo-3756345.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" 
                alt="Featured product" 
                className="w-full h-auto object-cover rounded-apple"
              />
              <div className="absolute inset-0 bg-gradient-to-tr from-primary-500/20 to-transparent"></div>
            </div>
          </AnimatedSection>
        </div>
      </section>

      {/* Features */}
      <section className="py-16 md:py-20">
        <div className="container-custom">
          <div className="text-center mb-16">
            <AnimatedSection>
              <h2 className="text-3xl md:text-4xl font-medium text-secondary-900 dark:text-white mb-4">
                Designed for the way you work
              </h2>
              <p className="text-lg text-secondary-600 dark:text-secondary-300 max-w-3xl mx-auto">
                Our intuitive interface adapts to your workflow, making you more productive and creative.
              </p>
            </AnimatedSection>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              {
                icon: <FiGlobe size={24} />,
                title: "Global Design System",
                description: "A comprehensive design system that ensures consistency across all platforms and devices."
              },
              {
                icon: <FiActivity size={24} />,
                title: "Performance Optimized",
                description: "Engineered for speed and efficiency, delivering a smooth experience even on low-end devices."
              },
              {
                icon: <FiShield size={24} />,
                title: "Security First",
                description: "Built with security as a foundation, protecting your data with industry-leading measures."
              }
            ].map((feature, index) => (
              <AnimatedSection key={index} delay={0.1 * index}>
                <Card className="p-6 h-full">
                  <div className="text-primary-500 mb-4">
                    {feature.icon}
                  </div>
                  <h3 className="text-xl font-medium text-secondary-900 dark:text-white mb-2">
                    {feature.title}
                  </h3>
                  <p className="text-secondary-600 dark:text-secondary-400">
                    {feature.description}
                  </p>
                </Card>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </section>

      {/* Product Highlight */}
      <section className="py-16 md:py-24 bg-secondary-50 dark:bg-secondary-900/50">
        <div className="container-custom">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <AnimatedSection direction="right">
              <div className="order-2 lg:order-1">
                <h2 className="text-3xl md:text-4xl font-medium text-secondary-900 dark:text-white mb-6">
                  Crafted with precision and care
                </h2>
                <p className="text-lg text-secondary-600 dark:text-secondary-300 mb-6">
                  Every pixel and interaction is thoughtfully designed to provide an exceptional user experience that feels natural and intuitive.
                </p>
                <ul className="space-y-4 mb-8">
                  {[
                    "Intuitive user interface",
                    "Responsive on all devices",
                    "Customizable to your needs",
                    "Regular updates and improvements"
                  ].map((item, index) => (
                    <li key={index} className="flex items-start">
                      <FiCheckCircle className="text-success-500 mt-1 mr-2 flex-shrink-0" />
                      <span className="text-secondary-700 dark:text-secondary-300">{item}</span>
                    </li>
                  ))}
                </ul>
                <Button>
                  Explore Features <FiArrowRight className="ml-2" />
                </Button>
              </div>
            </AnimatedSection>
            
            <AnimatedSection direction="left" className="order-1 lg:order-2">
              <div className="rounded-apple overflow-hidden shadow-apple dark:shadow-apple-dark">
                <img 
                  src="https://images.pexels.com/photos/5082579/pexels-photo-5082579.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" 
                  alt="Product features" 
                  className="w-full h-auto"
                />
              </div>
            </AnimatedSection>
          </div>
        </div>
      </section>

      {/* Testimonial Section */}
      <section className="py-16 md:py-24">
        <div className="container-custom">
          <AnimatedSection>
            <div className="bg-primary-500 rounded-apple p-10 md:p-16 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-1/2 h-full opacity-10">
                <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                  <path fill="#FFFFFF" d="M42.8,-57.2C57.9,-47.9,74,-38.7,83.3,-23.9C92.6,-9.1,95,11.3,88.5,29.1C82,46.8,66.5,61.8,49.3,70.8C32.1,79.8,13.3,82.7,-5.2,79.8C-23.7,77,-41.9,68.3,-51.4,54.7C-60.9,41.2,-61.8,22.7,-65.9,3.4C-70.1,-15.9,-77.6,-36,-71.3,-50.7C-65,-65.3,-44.9,-74.5,-27.3,-75.1C-9.6,-75.8,5.5,-67.9,20.2,-62.3C35,-56.7,49.4,-53.3,61.3,-45.4Z" transform="translate(100 100)" />
                </svg>
              </div>
              <div className="relative z-10 text-white text-center max-w-3xl mx-auto">
                <svg className="w-12 h-12 text-white/40 mx-auto mb-6" fill="currentColor" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.8,5.1C7.9,6.5,5.8,9.1,5.8,12.8c0,4.2,3.4,7.6,7.6,7.6c0.4,0,0.9-0.1,1.3-0.1c-0.6,1.5-1.6,2.6-3.1,3.4 C13,24.4,14.6,25,16.3,25c2.8-1.3,4.9-3.9,4.9-7.6C21.1,10.6,16.1,5.1,10.8,5.1z M26.7,5.1c-2.9,1.4-5,3.9-5,7.7c0,4.2,3.4,7.6,7.6,7.6c0.4,0,0.9-0.1,1.3-0.1c-0.6,1.5-1.6,2.6-3.1,3.4c1.4,0.8,3,1.3,4.6,1.3c2.8-1.3,4.9-3.9,4.9-7.6 C37.1,10.6,32.1,5.1,26.7,5.1z"></path>
                </svg>
                <p className="text-xl md:text-2xl font-light mb-8 leading-relaxed">
                  "This product has completely transformed how our team works. The thoughtful design and powerful features make it a joy to use every day. It's rare to find something that's both beautiful and functional."
                </p>
                <div>
                  <h4 className="font-medium text-lg">Sarah Johnson</h4>
                  <p className="text-white/70">Creative Director, Design Studio</p>
                </div>
              </div>
            </div>
          </AnimatedSection>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 md:py-28">
        <div className="container-custom">
          <AnimatedSection direction="none">
            <div className="text-center max-w-3xl mx-auto">
              <h2 className="text-3xl md:text-4xl font-medium text-secondary-900 dark:text-white mb-6">
                Ready to get started?
              </h2>
              <p className="text-lg text-secondary-600 dark:text-secondary-300 mb-8">
                Join thousands of users who already love our product. Start your journey today.
              </p>
              <div className="flex flex-col sm:flex-row justify-center gap-4">
                <Button size="lg">Get Started</Button>
                <Button variant="secondary" size="lg">Contact Sales</Button>
              </div>
            </div>
          </AnimatedSection>
        </div>
      </section>
    </div>
  )
}

export default Home